<template>
    <view :class='[$style.cell, bordered ? $style.border : ""]' @tap='go'>
        <view :class='$style.left'>
            <template v-if='$slot.icon'>
                <slot name='icon'></slot>
            </template>
            <view :class='$style.title'>
                <slot></slot>
            </view>
        </view>
        <view :class='$style.right'>
            <template v-if='$slot.right'>
                <slot name='right'></slot>
            </template>
            <ArrowRight v-if="arrow || isLink" :class='$style.arrow' />
        </view>
    </view>
</template>

<script lang='ts' setup>
    import Taro from '@tarojs/taro'
    import { useSlots } from 'vue'
    import { ArrowRight } from '@nutui/icons-vue-taro';

    const props = defineProps<{
        arrow? : boolean;
        bordered? : boolean;
        isLink? : boolean;
        url? : string;
        before? : (to : string) => boolean
    }>()

    const $slot = useSlots()

    async function go() {
        if(props.isLink) {
            if(props.before) {
                const res = await props.before(props.url)
                if(res) {
                    Taro.navigateTo({
                        url : props.url
                    })
                }
            }else {
                Taro.navigateTo({
                        url : props.url
                    })
            }
            
        }
    }
    

</script>

<style lang="scss" module>
.cell{
    display: flex;
    align-items: center;

    &.border{
        border-bottom: 2px solid #E4E7ED;
    }
}

.left{
    flex: 1;
    display: flex;
    align-items: center;

    .title{
        
    }
    
}

.right{
    display: flex;
    align-items: center;

    .arrow{
        width: 10px;
        margin-left: 20px;

    }
}
</style>